<template>
  <ContainerGroup>
    <Container>
      <FilterForm
        ref="filterForm"
        :elements="filterElements"
        :button-list="buttonList"
      />
    </Container>
    <Container height="fill" :scroll-y="true" display="flexY">
      <OperationContainer align="right" style="margin-bottom:10px;">
        <Button icon="add" @click="$router.push('/add')">新增</Button>
        <Button type="delete" icon="delete">删除</Button>
        <Button icon="import">导入</Button>
        <Button icon="export">导出</Button>
      </OperationContainer>
      <Table
        selection="selection"
        index
        :columns="tableColumns"
        :data="tableData"
        :loading="tableLoading"
        :pagination="{
          total: 100,
          current: 1,
          pageSize: 20,
        }"
        children="children"
        has-children="hasChildren"
        row-key="code"
        @rowSelection="getSelectionItems"
        @paginationChange="pageChange"
      >
        <template slot-scope="scope">
          <div>
            <div>编号：{{ scope.row.code }}</div>
            <div>姓名：{{ scope.row.name }}</div>
            <div>年龄：{{ scope.row.age }}</div>
            <div>组别：{{ scope.row.group }}</div>
            <div>地址：{{ scope.row.addr }}</div>
            <div style="color:red">其他：如果需要展开详情，可以在colums 字段里加上 type="expand" 字段</div>
          </div>
        </template>
      </Table>
      <Dialog
        title="春天里来百花开"
        :visible="dialogVisible"
        :footer-btns="[
          {
            text: '确定',
            type: 'primary',
            trigger: 'confirm',
          },
          {
            text: '关闭',
            type: 'info',
            trigger: 'cancel',
          },
        ]"
        @cancel="dialogVisible = false"
        @confirm="dialogConfirm"
      />
      <Drawer
        title="抽屉没有钱"
        :visible="drawerVisible"
        width="40%"
        :footer-btns="[
          {
            text: '确定',
            type: 'primary',
            trigger: 'confirm',
          },
          {
            text: '关闭',
            type: 'info',
            trigger: 'cancel',
          },
        ]"
        @cancel="drawerVisible = false"
        @confirm="drawConfirm"
      />
    </Container>
  </ContainerGroup>
</template>
<script>
import Container from '../../components/Container.vue'
import OperationContainer from '../../components/OperationContainer.vue'
export default {
  name: 'Index',
  components: { Container, OperationContainer },
  data() {
    return {
      tableLoading: false,
      dialogVisible: false,
      drawerVisible: false,
      filterElements: [
        {
          key: 'name',
          type: 'Input',
          label: '名称',
          value: ''
        },
        {
          key: 'birthDay',
          type: 'DatePicker',
          mode: 'daterange',
          label: '出生日期',
          value: '',
          width: 300
        },
        {
          key: 'addr',
          type: 'Input',
          label: '地址',
          value: ''
        },
        {
          key: 'deadDay',
          type: 'DatePicker',
          mode: '',
          label: '死亡日期',
          value: ''
        },
        {
          key: 'sexy',
          type: 'Select',
          label: '性别',
          value: '',
          options: [
            {
              label: '男',
              value: '1'
            },
            {
              label: '女',
              value: '2'
            }
          ]
        },
        {
          key: 'aihao',
          type: 'Select',
          label: '爱好',
          value: '',
          options: [
            {
              label: '看电影',
              value: '1'
            },
            {
              label: '游泳',
              value: '2'
            },
            {
              label: '下象棋',
              value: '3'
            }
          ]
        },
        {
          key: 'xueli',
          type: 'Select',
          label: '最高学历',
          value: '',
          options: [
            {
              label: '大专',
              value: '1'
            },
            {
              label: '本科',
              value: '2'
            },
            {
              label: '研究生',
              value: '3'
            }
          ]
        },
        {
          key: 'fanzui',
          type: 'Select',
          label: '是否有犯罪记录',
          width: 300,
          value: '',
          options: [
            {
              label: '有',
              value: '1'
            },
            {
              label: '无',
              value: '2'
            },
            {
              label: '保密',
              value: '3'
            }
          ]
        }
      ],
      buttonList: [
        {
          label: '查询',
          type: 'primary',
          icon: 'search',
          handlerClick: this.handerSearch
        },
        {
          label: '重置',
          type: 'info',
          icon: 'reset',
          handlerClick: this.handlerReset
        }
      ],
      tableData: [],
      tableColumns: [
        {
          type: 'expand'
        },
        {
          title: '编号',
          dataIndex: 'code',
          width: 100
        },
        {
          title: '姓名',
          dataIndex: 'name',
          width: 100
        },
        {
          title: '年龄',
          dataIndex: 'age',
          width: 100
        },
        {
          title: '组别',
          dataIndex: 'group'
        },
        {
          title: '地址',
          dataIndex: 'addr'
        },
        {
          title: '操作',
          width: 180,
          render: [
            {
              label: '编辑',
              type: 'primary',
              handlerClick: this.handlerEidt
            },
            {
              label: '查看',
              type: 'info',
              handlerClick: this.handlerDetail
            },
            {
              label: '撤销',
              type: 'info',
              handlerClick: this.handlerDetail
            },
            {
              label: '删除',
              type: 'delete',
              handlerClick: this.handlerDelete
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.tableLoading = true
    setTimeout(() => {
      this.tableLoading = false
      this.tableData = [
        {
          code: 1,
          name: 'table',
          age: 18,
          group: '第一组',
          selectAble: false,
          addr:
            '新疆维吾尔自治区呼和浩锡林郭勒盟自治县金桥镇银桥村铁桥组5689号尼古拉艾买提'
        },
        {
          code: 2,
          name: 'table',
          age: 18
        },
        {
          code: 3,
          name: 'table',
          age: 18
        },
        {
          code: 4,
          name: 'table',
          age: 18,
          group: '第一组',
          addr:
            '新疆维吾尔自治区呼和浩锡林郭勒盟自治县金桥镇银桥村铁桥组5689号尼古拉艾买提'
        },
        {
          code: 5,
          name: 'you children',
          age: 18,
          selectAble: false,
          children: [
            {
              code: 6,
              name: 'table2',
              age: 18
            },
            {
              code: 7,
              name: 'table2',
              age: 18
            },
            {
              code: 8,
              name: 'table2-3',
              age: 18,
              children: [
                {
                  code: 19,
                  name: 'table3',
                  age: 18
                },
                {
                  code: 20,
                  name: 'table3',
                  age: 18
                }
              ]
            },
            {
              code: 9,
              name: 'table2',
              age: 18
            },
            {
              code: 10,
              name: 'table2',
              age: 18
            }
          ]
        },
        {
          code: 11,
          name: 'table',
          age: 18
        }
      ]
    }, 1500)
  },
  methods: {
    handleFun() {},
    pageChange(page) {
      console.log(page, this.filterElements)
    },
    handlerEidt(row) {
      this.dialogVisible = true
    },
    handlerDetail(row) {
      console.log(row)
      this.drawerVisible = true
    },
    handerSearch(val) {
      console.log(val)
    },
    // 重置
    handlerReset() {
      this.$refs.filterForm.reset()
    },
    handlerDelete(row) {
      this.$confirm({
        content: '确定要删除该项吗？',
        title: '确认信息',
        okFn: (res) => {
          console.log(res)
        },
        cancelFn: (res) => {
          console.log('取消')
        }
      })
    },
    handlerDeleteAll(params) {
      console.log(this.$toast.warning('失败了'))
      // this.$toast.warning("成功了")
    },
    dialogConfirm() {
      console.log('ss')
    },
    drawConfirm() {
      console.log('drawer')
    },
    getSelectionItems(list) {
      console.log(list)
    }
  }
}
</script>
<style lang="less" scoped>
.index {
  height: 100%;
}
</style>

